<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>阵地预约 - 新时代文明实践智慧服务系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background: #f5f5f5;
            overflow-x: hidden;
            padding-top: 44px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航栏 */
        .navbar {
            background: linear-gradient(to bottom, #fce4ec 0%, #fff3e0 100%);
            color: #ff6b00;
            height: 44px;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            box-shadow: 0 2px 8px rgba(255,107,0,0.2);
        }
        
        .navbar-left {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
        
        .back-btn {
            font-size: 18px;
        }
        
        .navbar-title {
            font-size: 16px;
            font-weight: bold;
        }
        
        /* 搜索栏 */
        .search-bar {
            background: white;
            margin: 15px;
            border-radius: 20px;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .search-input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 14px;
            background: transparent;
        }
        
        .search-btn {
            color: #ff6b00;
            font-size: 16px;
            cursor: pointer;
        }
        
        /* 筛选栏 */
        .filter-bar {
            background: white;
            margin: 0 15px 15px;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .filter-title {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        
        .filter-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .filter-tag {
            padding: 6px 12px;
            border-radius: 15px;
            background: #f0f2f5;
            font-size: 12px;
            color: #666;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .filter-tag.active {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
        }
        
        /* 高级筛选条件 */
        .advanced-filter {
            background: white;
            margin: 0 15px 15px;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .advanced-filter-title {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        
        .filter-row {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .filter-group {
            flex: 1;
            min-width: 0;
        }
        
        .filter-label {
            font-size: 12px;
            color: #666;
            margin-bottom: 5px;
            display: block;
        }
        
        .filter-select {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            background: white;
            font-size: 12px;
            color: #333;
            outline: none;
            transition: border-color 0.3s;
        }
        
        .filter-select:focus {
            border-color: #ff6b00;
        }
        
        .filter-select option {
            padding: 5px;
        }
        
        /* 视图切换 */
        .view-toggle {
            background: white;
            margin: 0 15px 15px;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .toggle-btn {
            display: flex;
            gap: 5px;
        }
        
        .toggle-item {
            padding: 8px 15px;
            border-radius: 20px;
            background: #f0f2f5;
            font-size: 12px;
            color: #666;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .toggle-item.active {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
        }
        
        /* 阵地列表 */
        .venue-list {
            margin: 0 15px;
        }
        
        .venue-card {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .venue-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(255, 107, 0, 0.15);
        }
        
        .venue-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }
        
        .venue-info {
            flex: 1;
        }
        
        .venue-name {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        
        .venue-category {
            background: linear-gradient(135deg, #fff3e0, #ffecb3);
            color: #ff6b00;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 10px;
            display: inline-block;
        }
        
        .venue-status {
            padding: 5px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: bold;
        }
        
        .status-available {
            background: #d4edda;
            color: #155724;
        }
        
        .status-busy {
            background: #fff3cd;
            color: #856404;
        }
        
        .status-full {
            background: #f8d7da;
            color: #721c24;
        }
        
        .venue-details {
            margin-bottom: 15px;
        }
        
        .detail-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            font-size: 13px;
            color: #666;
        }
        
        .detail-icon {
            font-size: 14px;
        }
        
        .venue-features {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 15px;
        }
        
        .feature-tag {
            background: #f0f2f5;
            color: #666;
            padding: 4px 8px;
            border-radius: 8px;
            font-size: 11px;
        }
        
        .venue-actions {
            display: flex;
            gap: 10px;
        }
        
        .btn {
            padding: 8px 16px;
            border-radius: 20px;
            border: none;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
            flex: 1;
            text-align: center;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
        }
        
        .btn-secondary {
            background: #fff3e0;
            color: #ff6b00;
        }
        
        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        /* 地图视图 */
        .map-container {
            background: white;
            margin: 0 15px;
            border-radius: 16px;
            height: 300px;
            display: none;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 14px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .map-container.active {
            display: flex;
        }
        
        /* 快速预约 */
        .quick-book {
            position: fixed;
            bottom: 70px;
            right: 20px;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            box-shadow: 0 4px 20px rgba(255, 107, 0, 0.4);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .quick-book:hover {
            transform: scale(1.1);
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        .nav-item {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .nav-icon {
            font-size: 20px;
            margin-bottom: 2px;
        }
        
        .nav-label {
            font-size: 10px;
            color: #999;
        }
        
        .nav-item.active .nav-icon {
            color: #ff6b00;
        }
        
        .nav-item.active .nav-label {
            color: #ff6b00;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <div class="navbar-left" onclick="goBack()">
            <span class="back-btn">←</span>
            <span class="navbar-title">阵地预约</span>
        </div>
    </div>
    
    <!-- 搜索栏 -->
    <div class="search-bar">
        <span class="search-icon">🔍</span>
        <input type="text" class="search-input" placeholder="搜索阵地名称或地址">
        <span class="search-btn">搜索</span>
    </div>
    
    <!-- 筛选栏 -->
    <div class="filter-bar">
        <div class="filter-title">🏷️ 阵地类型</div>
        <div class="filter-tags">
            <span class="filter-tag active">全部</span>
            <span class="filter-tag">实践中心</span>
            <span class="filter-tag">文化广场</span>
            <span class="filter-tag">社区服务站</span>
            <span class="filter-tag">志愿者之家</span>
            <span class="filter-tag">图书馆</span>
        </div>
    </div>
    
    <!-- 高级筛选条件 -->
    <div class="advanced-filter">
        <div class="advanced-filter-title">🔍 高级筛选</div>
        <div class="filter-row">
            <div class="filter-group">
                <label class="filter-label">功能室面积</label>
                <select class="filter-select" id="areaFilter" onchange="applyFilters()">
                    <option value="">不限</option>
                    <option value="small">小型（0-200㎡）</option>
                    <option value="medium">中型（200-500㎡）</option>
                    <option value="large">大型（500-1000㎡）</option>
                    <option value="xlarge">超大型（1000㎡+）</option>
                </select>
            </div>
            <div class="filter-group">
                <label class="filter-label">容纳人数</label>
                <select class="filter-select" id="capacityFilter" onchange="applyFilters()">
                    <option value="">不限</option>
                    <option value="small">小型（0-50人）</option>
                    <option value="medium">中型（50-200人）</option>
                    <option value="large">大型（200-500人）</option>
                    <option value="xlarge">超大型（500人+）</option>
                </select>
            </div>
            <div class="filter-group">
                <label class="filter-label">距离范围</label>
                <select class="filter-select" id="distanceFilter" onchange="applyFilters()">
                    <option value="">不限</option>
                    <option value="near">附近（0-1km）</option>
                    <option value="medium">中距离（1-3km）</option>
                    <option value="far">较远（3-5km）</option>
                    <option value="veryFar">很远（5km+）</option>
                </select>
            </div>
        </div>
    </div>
    
    <!-- 视图切换 -->
    <div class="view-toggle">
        <div class="toggle-btn">
            <span class="toggle-item active" onclick="switchView('list')">📋 列表</span>
            <span class="toggle-item" onclick="switchView('map')">🗺️ 地图</span>
        </div>
        <span style="font-size: 12px; color: #999;">共找到 8 个阵地</span>
    </div>
    
    <!-- 阵地列表 -->
    <div class="venue-list" id="venueList">
        <div class="venue-card" onclick="viewVenueDetail(1)">
            <div class="venue-header">
                <div class="venue-info">
                    <div class="venue-name">新时代文明实践中心</div>
                    <span class="venue-category">实践中心</span>
                </div>
                <span class="venue-status status-available">可预约</span>
            </div>
            <div class="venue-details">
                <div class="detail-item">
                    <span class="detail-icon">📍</span>
                    <span>人民路123号</span>
                </div>
                <div class="detail-item">
                    <span class="detail-icon">⏰</span>
                    <span>开放时间：08:00-22:00</span>
                </div>
                <div class="detail-item">
                    <span class="detail-icon">📐</span>
                    <span>阵地面积：500平方米</span>
                </div>
                <div class="detail-item">
                    <span class="detail-icon">👥</span>
                    <span>容纳人数：200人</span>
                </div>
                <div class="detail-item">
                    <span class="detail-icon">🚗</span>
                    <span>距离您：0.5km</span>
                </div>
            </div>
            <div class="venue-features">
                <span class="feature-tag">💻 多媒体设备</span>
                <span class="feature-tag">🎤 音响系统</span>
                <span class="feature-tag">🅿️ 免费停车</span>
                <span class="feature-tag">♿ 无障碍通道</span>
            </div>
            <div class="venue-actions">
                <button class="btn btn-secondary" onclick="event.stopPropagation(); callVenue('010-12345678')">📞 联系</button>
                <button class="btn btn-primary" onclick="event.stopPropagation(); bookVenue(1)">立即预约</button>
            </div>
        </div>
        
        <div class="venue-card" onclick="viewVenueDetail(2)">
            <div class="venue-header">
                <div class="venue-info">
                    <div class="venue-name">社区文化广场</div>
                    <span class="venue-category">文化广场</span>
                </div>
                <span class="venue-status status-busy">使用中</span>
            </div>
            <div class="venue-details">
                <div class="detail-item">
                    <span class="detail-icon">📍</span>
                    <span>文化街45号</span>
                </div>
                <div class="detail-item">
                    <span class="detail-icon">⏰</span>
                    <span>开放时间：06:00-24:00</span>
                </div>
                <div class="detail-item">
                    <span class="detail-icon">📐</span>
                    <span>阵地面积：1200平方米</span>
                </div>
                <div class="detail-item">
                    <span class="detail-icon">👥</span>
                    <span>容纳人数：500人</span>
                </div>
                <div class="detail-item">
                    <span class="detail-icon">🚗</span>
                    <span>距离您：1.2km</span>
                </div>
            </div>
            <div class="venue-features">
                <span class="feature-tag">🎭 舞台设施</span>
                <span class="feature-tag">💡 LED屏幕</span>
                <span class="feature-tag">🚻 公共设施</span>
                <span class="feature-tag">🌳 绿化环境</span>
            </div>
            <div class="venue-actions">
                <button class="btn btn-secondary" onclick="event.stopPropagation(); callVenue('010-87654321')">📞 联系</button>
                <button class="btn btn-primary" onclick="event.stopPropagation(); bookVenue(2)">预约排队</button>
            </div>
        </div>
        
        <div class="venue-card" onclick="viewVenueDetail(3)">
            <div class="venue-header">
                <div class="venue-info">
                    <div class="venue-name">志愿者服务站</div>
                    <span class="venue-category">服务站</span>
                </div>
                <span class="venue-status status-available">可预约</span>
            </div>
            <div class="venue-details">
                <div class="detail-item">
                    <span class="detail-icon">📍</span>
                    <span>建设路88号</span>
                </div>
                <div class="detail-item">
                    <span class="detail-icon">⏰</span>
                    <span>开放时间：09:00-18:00</span>
                </div>
                <div class="detail-item">
                    <span class="detail-icon">📐</span>
                    <span>阵地面积：120平方米</span>
                </div>
                <div class="detail-item">
                    <span class="detail-icon">👥</span>
                    <span>容纳人数：50人</span>
                </div>
                <div class="detail-item">
                    <span class="detail-icon">🚗</span>
                    <span>距离您：2.1km</span>
                </div>
            </div>
            <div class="venue-features">
                <span class="feature-tag">☕ 休息区</span>
                <span class="feature-tag">📚 图书角</span>
                <span class="feature-tag">🖥️ 办公设备</span>
                <span class="feature-tag">📶 免费WiFi</span>
            </div>
            <div class="venue-actions">
                <button class="btn btn-secondary" onclick="event.stopPropagation(); callVenue('010-11223344')">📞 联系</button>
                <button class="btn btn-primary" onclick="event.stopPropagation(); bookVenue(3)">立即预约</button>
            </div>
        </div>
    </div>
    
    <!-- 地图视图 -->
    <div class="map-container" id="mapView">
        <div>
            🗺️ 地图功能开发中...<br>
            <small>将显示附近阵地位置</small>
        </div>
    </div>
    
    <!-- 快速预约按钮 -->
    <div class="quick-book" onclick="quickBook()">
        📅
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item" onclick="location.href='index.html'">
            <div class="nav-icon">🏠</div>
            <div class="nav-label">首页</div>
        </div>
        <div class="nav-item active">
            <div class="nav-icon">📍</div>
            <div class="nav-label">阵地</div>
        </div>
        <div class="nav-item" onclick="location.href='activities.html'">
            <div class="nav-icon">📅</div>
            <div class="nav-label">活动</div>
        </div>
        <div class="nav-item" onclick="location.href='services.html'">
            <div class="nav-icon">🎁</div>
            <div class="nav-label">服务</div>
        </div>
        <div class="nav-item" onclick="location.href='profile.html'">
            <div class="nav-icon">👤</div>
            <div class="nav-label">我的</div>
        </div>
    </div>
    
    <script>
        // 返回上一页
        function goBack() {
            history.back();
        }
        
        // 切换视图
        function switchView(view) {
            const listView = document.getElementById('venueList');
            const mapView = document.getElementById('mapView');
            const toggleItems = document.querySelectorAll('.toggle-item');
            
            toggleItems.forEach(item => item.classList.remove('active'));
            
            if (view === 'list') {
                listView.style.display = 'block';
                mapView.classList.remove('active');
                document.querySelector('.toggle-item').classList.add('active');
            } else {
                listView.style.display = 'none';
                mapView.classList.add('active');
                document.querySelectorAll('.toggle-item')[1].classList.add('active');
            }
        }
        
        // 筛选标签点击
        document.querySelectorAll('.filter-tag').forEach(tag => {
            tag.addEventListener('click', function() {
                document.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // 查看阵地详情
        function viewVenueDetail(id) {
            location.href = 'venue-detail.html?id=' + id;
        }
        
        // 预约阵地
        function bookVenue(id) {
            alert('正在跳转到预约页面...\n阵地ID: ' + id);
        }
        
        // 拨打电话
        function callVenue(phone) {
            if (confirm('是否拨打电话 ' + phone + '？')) {
                window.location.href = 'tel:' + phone;
            }
        }
        
        // 快速预约
        function quickBook() {
            alert('快速预约功能\n为您推荐最近的可用阵地');
        }
        
        // 搜索功能
        document.querySelector('.search-btn').addEventListener('click', function() {
            const keyword = document.querySelector('.search-input').value;
            if (keyword.trim()) {
                alert('搜索关键词: ' + keyword);
            }
        });
        
        // 回车搜索
        document.querySelector('.search-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.querySelector('.search-btn').click();
            }
        });
        
        // 阻止卡片点击冒泡
        document.querySelectorAll('.btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
            });
        });
        
        // 应用高级筛选
        function applyFilters() {
            const areaFilter = document.getElementById('areaFilter').value;
            const capacityFilter = document.getElementById('capacityFilter').value;
            const distanceFilter = document.getElementById('distanceFilter').value;
            
            let filterText = '筛选条件：\n';
            
            if (areaFilter) {
                const areaMap = {
                    'small': '小型（0-200㎡）',
                    'medium': '中型（200-500㎡）',
                    'large': '大型（500-1000㎡）',
                    'xlarge': '超大型（1000㎡+）'
                };
                filterText += '• 功能室面积：' + areaMap[areaFilter] + '\n';
            }
            
            if (capacityFilter) {
                const capacityMap = {
                    'small': '小型（0-50人）',
                    'medium': '中型（50-200人）',
                    'large': '大型（200-500人）',
                    'xlarge': '超大型（500人+）'
                };
                filterText += '• 容纳人数：' + capacityMap[capacityFilter] + '\n';
            }
            
            if (distanceFilter) {
                const distanceMap = {
                    'near': '附近（0-1km）',
                    'medium': '中距离（1-3km）',
                    'far': '较远（3-5km）',
                    'veryFar': '很远（5km+）'
                };
                filterText += '• 距离范围：' + distanceMap[distanceFilter] + '\n';
            }
            
            if (areaFilter || capacityFilter || distanceFilter) {
                alert(filterText + '\n正在筛选阵地...');
            }
        }
    </script>
</body>
</html>